import React, { useState } from 'react'
import {CaretLeftOutlined,CaretRightOutlined} from '@ant-design/icons'
import moduleName from 'react-redux'
const Img = () => {
  let [num,setNum]=useState(100);

  const ImagehahahLeftBut=()=>{
    if(num<100){
      num=num+100
    setNum(num)
    }
  }

  const ImagehahahRightBut=()=>{
    if(num > -900){
      num=num - 100
    setNum(num)
    console.log(num);
    }
  }
  return (
    <div className='Imagehahah'>
      <button onClick={ImagehahahLeftBut}  className='ImagehahahLeftBut'><CaretLeftOutlined /></button>
      <div style={{scrollBehavior:'smooth',transition:'transform 1s ease'}} className='imgsss'>
      <div style={{left:`${num}px`,position:'absolute',display:'flex',marginLeft:'10px',scrollBehavior:'smooth',transition:'transform 1s ease'}}>
      <div>科技</div>
      <div>商务</div>
      <div>美食</div>
      <div>教育</div>
      <div>背景</div>
      <div>风景</div>
      <div>纯色</div>
      <div>书籍</div>
      <div>植物</div>
      <div>城市</div>
      <div>电商</div>
      <div>服务</div>
      <div>金融</div>
      <div>地产</div>
      </div>
      </div>
      <button onClick={ImagehahahRightBut} className='ImagehahahRightBut'><CaretRightOutlined /></button>
    </div>
  )
}

export default Img
